<template>
  <div class="sideNavigation-view">
    <el-tabs tab-position="right" v-model="tabStatus" style="height: 200px;" :stretch="true" @tab-click="clickEvent">
      <el-tab-pane :label="item.title" :name="item.id" v-for="item in moduleList" :key="item.id" ></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  props: {
    moduleList: {
      type: Array,
      dafault: []
    },
    activeStatus: {
      type: String,
      dafault: 'model01'
    }
  },
  data() {
    return {
      tabStatus: 'model01'
    }
  },
  watch: {
    'activeStatus': function(newVal) {
      this.tabStatus = newVal
    }
  },
  methods: {
    clickEvent() {
      this.$emit('selectModel', this.tabStatus)
    }
  }
}
</script>

<style lang="less" scoped>
  /deep/ .el-tabs__item.is-active{
    color: #3561F6;
  }
  /deep/ .el-tabs__item{
    color: #7A7F8D;
  }
  /deep/ .el-tabs__active-bar{
    background-color: #3561F6;
  }
  /deep/ .el-tabs{
    transform: scale(0.8);
  }
  /deep/ .el-tabs__nav-prev, .el-tabs__nav-next{
    display: none;
  }
  /deep/ .el-tabs--right .el-tabs__nav-wrap.is-right, .el-tabs{
    height: auto !important;
  }
</style>